<template>
<view class="page page-fill">
		
		<view class="page-block info-list">
			<!-- 头像 -->
			
			<view class="item-wapper face-line-upbottom" @click="updateFace">
				<view class="info-words">头像</view>
				<view class="right-wapper">
					<image :src="userInfo.faceImage" class="face"></image>
					<view class="arrow-block">
						<image src="../../static/icos/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			
			<view class="line-top">
				<view class="line"></view>
			</view>
			
			<!-- 昵称 -->
			<view class="item-wapper">
				<view class="info-words">昵称</view>
				
				<view class="right-wapper">
					<view class="gray-fields">
						{{userInfo.nickname}}
					</view>
					<view class="arrow-block">
						<image src="../../static/icos/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			
			<view class="line-top">
				<view class="line"></view>
			</view>
			
			<!-- 生日 -->
			<view class="item-wapper">
				<view class="info-words">生日</view>
				
				<view class="right-wapper">
					<view class="gray-fields">
						{{userInfo.birthday}}
					</view>
					<view class="arrow-block">
						<image src="../../static/icos/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			
			<view class="line-top">
				<view class="line"></view>
			</view>
			
			<!-- 性别 -->
			<view class="item-wapper">
				<view class="info-words">性别</view>
				
				<view class="right-wapper">
					<view class="gray-fields">
						
						<view  v-if="userInfo.sex === 0">
							男
						</view>
						<view v-else-if="userInfo.sex === 1">
							女
						</view>
						<view v-else>
							未选择
						</view>
						
					</view>
					<view class="arrow-block">
						<image src="../../static/icos/left-gray-arrow.png" class="arrow-ico"></image>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="footer-wapper">
			<view class="footer-words" @click="cleanStorage">
				清理缓存
			</view>
			<view class="footer-words" style="margin-top: 10upx;" @click="logoutHanlder">
				退出登录
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{}
			}
		},
		onShow() {
			let userInfo = this.getGlobalUser("globalUser");
			console.log(userInfo);
			if(userInfo !== null){
				this.userInfo = userInfo;
			}
		},
		methods: {
			// 修改头像
			updateFace(){
				// 1、showActionSheet实现底部弹起，提供"查看我的头像", "从相册选择上传"
				// https://uniapp.dcloud.io/api/ui/prompt?id=showactionsheet
				
				
				
				uni.showActionSheet({
					itemList:["查看我的头像","从相册选择上传"],
					success: (res) => {
						let index = res.tapIndex;
						if(index === 0){//预览图片
							// 2、查看我的头像->预览头像 uni.previewImage
							let imgArr = [this.userInfo.faceImage];
							// https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject
							uni.previewImage({
								current: 0, // 下标或者图片地址
								urls: imgArr //需要预览的图片列表
							})
						}else if(index === 1){//上传图片
							// 3、从相册选择上传-> 上传头像 uni.chooseImage
							// https://uniapp.dcloud.io/api/media/image?id=chooseimage
							uni.chooseImage({
								count:1,
								// sizeType:"compressed", //不支持h5
								success: (res) => {
									// 获得临时路径
									let tempFilePath = res.tempFilePaths[0];
									// #ifdef H5
									uni.navigateTo({
										url: "../meFace/meFace?tempFilePath=" + tempFilePath
									})
									// #endif
									// #ifndef H5
									uni.navigateTo({
										url: "../faceCrop/faceCrop?tempFilePath=" + tempFilePath
									})
									// #endif
								}
							})
						}
					}
				})
				
				
					// 选择上传头像 uni.chooseImage
					// 获得临时路径 H5【meFace】，否则[faceCrop]
				
				
				// 1、showActionSheet实现底部弹起，提供"查看我的头像", "从相册选择上传"
				// 2、查看我的头像->预览头像 uni.previewImage
				// 3、从相册选择上传-> 上传头像 uni.chooseImage
					// 选择上传头像 uni.chooseImage
					// 获得临时路径 H5【meFace】，否则[faceCrop]
			},
			// cleanStorage  清楚缓存
			cleanStorage(){
				// 但不清除登录状态
				let globalUser = this.getGlobalUser("globalUser");
				uni.clearStorageSync();
				uni.setStorageSync("globalUser",globalUser);
				uni.showToast({
					title: "清除缓存成功",
					duration: 1000,
					mask: false
				})
			},
			// 退出登录
			logoutHanlder(){
				let userInfo = this.getGlobalUser("globalUser");
				if(userInfo === null){
					uni.switchTab({
						url:"../me/me"
					})
					return;
				}
				// 第一步，是向服务器发送请求
				uni.request({
					url: this.serverUrl +"/user/logout?userId="+userInfo.id+"&"+this.visitKey,
					method:"POST",
					success: (res) => {
						if(res.data.status === 200){
							// 退出成功
							uni.removeStorageSync("globalUser");
							uni.switchTab({
								url: "../me/me"
							})
						}
					}
				})
				// 第二步，根据判断后台返回结果，清除缓存
				
				// 第三步， 跳转到个人未登录中心
			}
		}
	}
</script>

<style>
	@import url("meInfo.css");
</style>
